<template>
	<div :class="curClassName" :style="curStyle">
		<template v-if="dynaNavMode === 'ROUTEVIEW'">
			<template v-if="enableCache">
				<router-view v-slot="{ Component }">
					<keep-alive :include="includePage">
						<component :is="Component" :key="$route.fullPath" />
					</keep-alive>
				</router-view>
			</template>
			<router-view v-else :key="$route.fullPath"></router-view>
		</template>
		<component
			v-if="navData"
			openType="EMBED"
			class="view-container2"
			:is="navData.navViewName"
			:key="navData.data?.srfkey"
			:context="navData.navData?.context"
			:viewParams="navData.navData?.viewParams"
			@view-action="(name: string, action: IEvent<string>, data: IParam) => { handleViewAction(name, action, data); }"
			@view-init="(name: string, data: IViewAbility) => { handleViewInit(name, data); }"
			@view-destroy="(name: string, data: IParam) => { handleViewDestroy(name, data); }"
		>
		</component>
	</div>
</template>
<script setup lang="ts">
import { IEvent, IParam, IViewAbility } from '@/core';
import { useAppStoreWithOut } from '@/store';
import { kebabCase } from 'lodash';
import { NavPosProps } from './nav-pos';
const props = defineProps(NavPosProps);

/**
 * 项名称
 *
 * @memberof AppNavPos
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式
 *
 * @memberof AppNavPos
 */
const curStyle = computed(() => {
	const currentModel = props.layoutModelDetails[itemName.value];
	if (currentModel) {
		const containerStyle = currentModel.getElementStyle();
		if (Object.is(currentModel.viewType, 'APPINDEXVIEW')) {
			Object.assign(containerStyle, { 'background-color': '#f0f2f5' });
		}
		return containerStyle;
	}
});

/**
 * 类名
 *
 * @memberof AppNavPos
 */
const curClassName = computed(() => {
	const currentModel = props.layoutModelDetails[itemName.value];
	if (currentModel) {
		return `app-nav-pos ${itemName.value} ${currentModel.sysCss || ''}`;
	}
	return `app-nav-pos`;
});

/**
 * 获取动态导航模式（DYNAMICCOMP：动态组件 ROUTEVIEW：路由出口）
 *
 * @memberof AppNavPos
 */
const dynaNavMode = computed(() => {
	const currentModel = props.layoutModelDetails[itemName.value];
	if (currentModel && currentModel.dynaNavMode) {
		return currentModel.dynaNavMode;
	}
	return 'ROUTEVIEW';
});

/**
 * 是否启用动态缓存
 *
 * @memberof AppNavPos
 */
const enableCache = computed(() => {
	const currentModel = props.layoutModelDetails[itemName.value];
	if (currentModel) {
		return currentModel.enableCache;
	}
	return true;
});

/**
 * 缓存页面
 *
 * @memberof AppNavPos
 */
const includePage = computed(() => {
	const { getPageMetas } = useAppStoreWithOut();
	if (getPageMetas && getPageMetas.length > 0) {
		return getPageMetas.map((pageMeta: IParam) => {
			return kebabCase(pageMeta.tag);
		});
	} else {
		return [];
	}
});

/**
 * 执行视图事件
 *
 * @param {*} args
 * @memberof AppNavPos
 */
const handleViewInit = (name: string, data: IViewAbility) => {
	console.log('视图初始化', name, data);
};
const handleViewAction = (
	name: string,
	action: IEvent<string>,
	data: IParam
) => {
	console.log('视图行为', name, action, data);
};
const handleViewDestroy = (name: string, data: IParam) => {
	console.log('视图销毁', name, data);
};
</script>
